<template>
    <el-scrollbar class="mind-cen" id="graphcontainerdiv">
        <div id="nodeDetail" class="node_detail">
            <h5>详细数据</h5>
            <span class="node_pd" v-for="(m, k) in nodeDetail" :key="k">
                {{ k }}: {{ m }}
            </span>
        </div>
        <!-- 中部图谱画布 -->
        <div id="graphContainer" class="graphContainer">
            <kgbuilder ref="kg_builder" :styles="style" :initData="graphData" :domain="domain" :domainId="domainId"
                :ring-function="RingFunction" @editForm="editForm" />
        </div>
    </el-scrollbar>
</template>
<script>
export default {
    name: 'GraphCanvas',
    components: {
    },
    props: {
        style: {
            type: Object,
            required: true
        },
        graphData: {
            type: Object,
            required: true
        },
        domain: {
            type: String,
            required: true
        },
        domainId: {
            type: Number,
            required: true
        },
        RingFunction: {
            type: Array,
            required: true
        }
    },
    methods: {
        editForm(flag, action, data, domainId) {
            this.$emit('editForm', flag, action, data, domainId)
        }
    }
}
</script>

<style scoped>
/* 样式可以在这里添加或从父组件传递 */
.graphContainer {
    height: 100vh - 50px;
}

.mind-cen {
    height: calc(100% - 70px);
}

.node_detail {
    position: absolute;
    width: 100%;
    line-height: 35px;
    border-radius: 10px;
    font-size: 12px;
    padding-bottom: 10px;
    background: rgba(198, 226, 255, 0.2);
    display: none;
}

.node_pd {
    padding: 4px;
    font-size: 13px;
    font-family: -webkit-body;
    font-weight: 600;
}
</style>
